import React, { useState } from 'react';
import { render } from 'react-dom';
import { ConfigProvider, DatePicker, message, version, Button, Layout,  Menu} from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';
const { Header, Footer, Sider, Content} = Layout;

function App() {
  

  return (
    <div className="App">
      <h1>antd version: {version}</h1>
    <DatePicker />
    <Button type="primary" style={{ marginLeft: 8 }}>
      Primary Button
    </Button>
    <Example></Example>
    <LayoutAntd></LayoutAntd>
    </div>
  )
}

function LayoutAntd(){
  return(
    <>
      <Layout>
        <Layout>
          <Header>
            <Menu 
              theme="dark"
              mode="horizontal"
            >
              <Menu.Item>菜单项一22</Menu.Item>
              <Menu.Item>菜单项二</Menu.Item>
              <Menu.SubMenu title="子菜单">
              <Menu.Item>子菜单项</Menu.Item>
              </Menu.SubMenu>
            </Menu>
          </Header>
          <Content></Content>
          <Footer></Footer>
        </Layout>
        <Sider></Sider>
      </Layout>
    </>
  )
}

function Example(){
  const [date, setDate] = useState(null);
  const handleChange = value => {
    alert(value);
    message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
    setDate(value);
  };
  return (
    <ConfigProvider locale={zhCN}>
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={handleChange} />
        <div style={{ marginTop: 16 }}>
          当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
        </div>
      </div>
    </ConfigProvider>
  );
}

export default App
